<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="container">
    <h3 align="center">弹窗和工具提示</h3>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#Modal">
        打开模态框
    </button>
    <div class="modal" id="Modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">模态框标题</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-body">
                        <h5>弹窗</h5>
                        <p><a href="#" role="button" class="btn btn-secondary popover-test" title="望岳"
                                data-bs-content="荡胸生曾云，决眦入归鸟。会当凌绝顶，一览众山小。">古诗</a></p>
                        <hr>
                        <h5>工具提示</h5>
                        <p><a href="#" class="tooltip-test" title="古诗一">古诗一</a>、<a href="#" class="tooltip-test"
                                title="古诗二">古诗二</a> 和 <a href="#" class="tooltip-test" title="古诗三">古诗三</a></p>
                    </div>
                    <script>
                        $(document).ready(function () {
                            //找到对应的属性类别，添加弹窗和工具箱提示
                            $('.popover-test').popover();
                            $('.tooltip-test').tooltip();
                        });
                    </script>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>